<template>
  <div>
    <div class="form">
      <div class="search">
        <div class="date_picker pad_right">
          <el-date-picker
            v-model="dataValue"
            type="daterange"
            range-separator="-"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
          ></el-date-picker>
        </div>
        <el-select
          multiple
          collapse-tags
          v-model="deptIds"
          placeholder="机构名称"
          class="search_info"
          @change="changeSelect($event)"
        >
          <el-option
            v-for="item in organiseList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
        <div>
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="getList(1)" class="searchBtn">查询</el-button>
        </div>
      </div>
      <el-table
        class="listTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column
          label="序号"
          prop="id"
          width="100"
          align="center"
          type="index"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column label="机构" align="center">
          <template slot-scope="{row}">
            <span>{{ row.deptName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请笔数" align="center">
          <template slot-scope="{row}">
            <span>{{ row.financeAmountTotal }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请总额(万元)" align="center">
          <template slot-scope="{row}">
            <span>{{ row.financeAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="新增授信笔数" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.approveAmountTotal }}</span>
          </template>
        </el-table-column>
        <el-table-column label="新增授信总额(万元)" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.approveAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="新增放款笔数" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.loanAmountTotal }}</span>
          </template>
        </el-table-column>
        <el-table-column label="新增放款总额(万元)" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.loanAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期末贷款总额(万元)" align="center">
          <template slot-scope="{row}">
            <span :class="{'res_color': row.taskStatus == 2}">{{ row.loanAmountAll }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :total="total"
        layout="total, sizes, prev, pager, next"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        :current-page.sync="curPage"
        @current-change="getList($event)"
        class="sortStyle"
      />
    </div>
  </div>
</template>

<script>
import { getNumericalStatement, deptList } from "@/api/system/user";
import {
  allBatchDelete,
  batchDelete,
  allSubmit,
  submit,
  creatWork,
  getRecieveList,
  getList,
  cancelOpt,
  listPreview,
  audit,
  overUdit,
  listPreviewCity,
  downLoadExampel,
  upLoadExampel,
  companyPreview
} from "@/api/article";
import { MessageBox } from "element-ui";
export default {
  components: {},
  data() {
    return {
      workCode: "",
      workStatus: "",
      status: [],
      list: [],
      listLoading: false,
      total: 0,
      limit: 10,
      curPage: 1,
      listData: [],
      detailShow: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 日期范围
      dateRange: [],
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      deptIds: [],
      oldSelectVal: [],
      organiseList: [],
      dataValue: ""
    };
  },
  created() {},
  mounted() {
    // this.getList(1)
    this.getList(1);
    this.getDeptList();
  },
  methods: {
    /** 查询用户列表 */
    getList(page) {
      var params = {
        pageNum: page,
        pageSize: this.limit,
        type: 1
      };
      if (this.dataValue) {
        let newStartDate = new Date(this.dataValue[0]);
        let starttime =
          newStartDate.getFullYear() +
          "-" +
          (newStartDate.getMonth() + 1) +
          "-" +
          newStartDate.getDate();
        let newEndDate = new Date(this.dataValue[1]);
        let endtime =
          newEndDate.getFullYear() +
          "-" +
          (newEndDate.getMonth() + 1) +
          "-" +
          newEndDate.getDate();
        params.startTime = starttime;
        params.endTime = endtime;
      }
      if (this.deptIds) {
        let deptIds1 = this.deptIds;
        if (deptIds1.includes("ALL")) {
          const index = deptIds1.indexOf("ALL");
          deptIds1.splice(index, 1);
        }
        params.deptIds = deptIds1.join(",");
      }
      this.listLoading = true;
      getNumericalStatement(this.$qs.stringify(params)).then(response => {
        this.listLoading = false;
        if (response.code == 200) {
          this.list = response.rows;
          this.total = response.total;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    reset() {
      this.dataValue = "";
      this.deptIds = [];
    },
    /** 查询机构 */
    getDeptList() {
      var params = {};
      // this.listLoading = true
      deptList(this.$qs.stringify(params)).then(response => {
        this.organiseList = response.data;
        this.organiseList.unshift({ id: "ALL", label: "全选" });
        // this.listLoading = false;
      });
    },
    indexMethod(index) {
      index = index + 1 + (this.curPage - 1) * this.limit;
      return index;
    },
    changeSelect(val) {
      let selectVal = this.deptIds;
      let oldSelectVal = this.oldSelectVal;
      let arr = this.organiseList;
      let allValues = [];
      for (let item of arr) {
        allValues.push(item.id);
      }
      if (val.includes("ALL")) {
        if (!oldSelectVal.includes("ALL")) {
          selectVal = allValues;
        } else {
          const index = val.indexOf("ALL");
          val.splice(index, 1);
          selectVal = val;
        }
      } else {
        if (oldSelectVal.includes("ALL")) {
          selectVal = [];
        } else if (allValues.length - 1 === val.length) {
          selectVal = allValues;
        }
      }
      this.deptIds = selectVal;
      this.oldSelectVal = selectVal;
    },
    goback() {
      this.detailShow = false;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList(1);
    },
    //任务详情
    preview(id) {
      this.detailShow = true;
    }
  }
};
</script>
<style scoped>
.form {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
  background: #fff;
}
.search {
  display: flex;
  position: relative;
}
.search_info {
  width: 246px;
  height: 40px;
  margin-right: 16px;
}
.searchBtn {
  margin-left: 16px;
  height: 36px;
}
.sortStyle {
  height: 19px;
  float: right;
  /* right: 24px; */
  margin-top: 20px;
  margin-bottom: 30px;
}
.pos_right_btn {
  position: absolute;
  right: 0;
}
.opt_font {
  cursor: pointer;
  color: #2e82ff;
}
.detail_title {
  font-size: 16px;
  font-weight: 400;
  color: #212121;
  line-height: 22px;
}
.detail_title span {
  padding-left: 4px;
  background: #1e88e5;
  margin-right: 12px;
}
.row {
  display: flex;
  padding-bottom: 12px;
}
.detail_info {
  padding-top: 16px;
}
.info_left {
  display: flex;
}
.info_right {
  display: flex;
  padding-left: 202px;
}
.info_left_title {
  font-size: 14px;
  font-weight: 400;
  color: #616161;
  line-height: 20px;
  width: 112px;
  margin-right: 16px;
}
.info_left_content {
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 20px;
  width: 150px;
}
.pos_top {
  padding-top: 12px;
}
.detailTable {
  margin-top: 16px;
}
.opt_font {
  color: #1e88e5;
  cursor: pointer;
}
.page_pos {
  text-align: right;
  padding-top: 10px;
}
.backBtn {
  text-align: center;
  margin-top: 10px;
}
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% -30px);
  /* max-width: ; */
}
/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  height: 700px;
  overflow-y: auto;
  padding-top: 0;
}
.tab {
  display: flex;
  position: absolute;
  right: 32px;
  top: 14px;
}
.tab_border {
  border: 1px solid #409eff;
  color: #409eff;
  padding: 10px 12px;
  font-size: 14px;
  margin-right: 16px;
}
.change {
  border: 1px solid #f56c6c;
  color: #f56c6c;
}
.listTable {
  margin-top: 17px;
}
.pad_right {
  padding-right: 20px;
}
</style>
